import React, { Component } from 'react';

import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';

export default class Pages extends Component {

    constructor(props) {
        super(props)
    }

    render() {
      const pageBtnStyle = {
        marginRight: 20,
        width: 45,
        minWidth: 45
      };

      const pageStyle = {
        textAlign: 'center',
        position: 'fixed',
        bottom: 50
      };

      return (
          <div style={pageStyle}>
            {
              this.props.pages.map((val, ind)=>{
                if(val == this.props.pageNo){
                  return (
                    <RaisedButton key={ind} label={val} primary={true} style={pageBtnStyle}/>
                  )
                }else {
                  return (
                    <FlatButton key={ind} label={val} primary={true} style={pageBtnStyle} onTouchTap={this.props.handlerEvent}/>
                  )
                }
              })
            }
          </div>
        )
    }
}
